<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 基本文本和字体样式 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals -->


    <!-- 字体种类 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#%E5%AD%97%E4%BD%93%E7%A7%8D%E7%B1%BB -->
    <!-- 要在你的文本上设置一个不同的字体，你可以使用 font-family  属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。 -->
    <p>font-family</p>
    <p style="font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;">font-family</p>

    <hr>

    <!-- 字体大小 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F -->
    <!-- 字体大小 (通过 font-size 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 percentages)， -->
    <p>font-size</p>
    <p style="font-size: 2em;">font-size</p>

    <hr>

    <!-- font-variant -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant -->
    <!-- font-variant 属性是font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asian (en-US)等属性的简写。 -->
    <!-- 你也可以使用简写 font 设定font-variant在CSS Level 2 (Revision 1)中的值（即normal 或 small-caps）。 -->
    <p>font-variant</p>
    <p style="font-variant: normal;">font-variant</p>
    <p style="font-variant: small-caps;">font-variant</p>

    <hr>

    <!-- 字体样式，字体粗细，文本转换和文本装饰 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#font_style_font_weight_text_transform_and_text_decoration -->
    <!-- font-style: 用来打开和关闭文本 italic (斜体)。  -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-style -->
    <p>font-style</p>
    <p style="font-style: normal;">font-style</p>
    <p style="font-style: italic;">font-style</p>
    <p style="font-style: oblique;">font-style</p>
    <!-- font-weight: 设置文字的粗体大小 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight -->
    <p>font-weight</p>
    <p style="font-weight: normal;">font-weight</p>
    <p style="font-weight: bold;">font-weight</p>
    <p style="font-weight: 400;">font-weight</p>
    <p style="font-weight: 800;">font-weight</p>

    <hr>

    <!-- Font 简写 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals#font_%E7%AE%80%E5%86%99 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/font -->
    <!-- 许多字体的属性也可以通过 font 的简写方式来设置 . 这些是按照以下顺序来写的：  font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. -->
    <p>font</p>
    <p style="font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;">font</p>
    

</body>

</html>